<template lang="pug">
  .warning-board-wrapper
    .board-title 分区
    hr
    .area-board(v-for="(area, index) of areasWarn")
      span.area-color(:style="`background: ${area.color}`")
      span {{ area.name }}
      span.area-bulb
        i(:class="`${area.status.toLowerCase()}`").iconfont.icon-bulb
</template>

<script>
export default {
  name: 'AreasBoard',
  props: {
    areasWarn: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {}
  }
}
</script>

<style lang="sass" scoped>
.normal
  color: #53964d
.complete
  color: #4080db
.warning
  color: #f2a538
.danger
  color: #e36262
.warning-board-wrapper
  width: 150px
  padding: 10px
  background: #fff
  border-radius: 4px
  border: 1px solid #ccc
  box-shadow: 0px 0px 10px #dfdfdf
  hr
    margin: 4px
  .area-board
    height: 22px
    line-height: 22px
    position: relative
    .area-color
      display: inline-block
      width: 30px
      height: 12px
      margin-right: 5px
      vertical-align: middle
    .area-bulb
      position: absolute
      right: 0
</style>
